// computed   vs   methods
// watch

const app = new Vue({
	data: {
		msg: "计算属性和侦听器",
		count: 1,
		firstName: 'Foo',
		lastName: 'Bar',
		// fullName: 'Foo Bar'
	},
	computed: {
		fullName: {
			get: function () {
				return this.firstName + ' ' + this.lastName
			},
			set: function(newValue) {
				var names = newValue.split(' ')
				this.firstName = names[0]
				this.lastName = names[names.length - 1]
			}
		},
		// fullName() {
		// 	return this.firstName + " " + this.lastName
		// },
		reversedMsg() {
			console.log("computed 触发了 ---")
			// return (123).toFixed(10)
			return this.msg.split("").reverse().join("")
		},
		countFixed2() {
			return this.count.toFixed(2)
		},
		now: function () {
		    return Date.now()
		}
	},
	// 计算属性: 是基于它们的 状态(data) 进行缓存的,只在相关 状态(data) 发生改变时它们才会重新求值
	// 侦听器: 观察和响应 Vue 实例上的数据变动
	watch: {
		/*
		firstName() {
			this.fullName = this.firstName + " " + this.lastName
		},
		lastName() {
			this.fullName = this.firstName + " " + this.lastName
		},*/
		// count(当前的值, 之前的值) {
		count(nowVal, before) {
			console.log(nowVal)
			console.log(before)
			console.log("count 变化了", Date.now())
		}
	},
	methods: {
		// now: function () {
		//     return Date.now()
		// },
		reversedMsgFn() {
			// console.log("methods 触发了")
			return this.msg.split("").reverse().join("")
		}
	}
}).$mount("#app")


